<template>
  <view class="material-stats-page">
    <view style="width: 100%; height: 100%;">
      <StatistTopBar />
    </view>

    <!-- 第一个统计图 -->
    <view style="box-shadow: inset 0px 0px 15px 15px #00364e;
        background-color: rgba(15, 30, 61, 1.0); 
        border: 1px solid #0e659f; padding-bottom: 30px; padding-top: 10px;">
      <!-- 头上工单数 -->
      <view style="text-align: center;">
        <view><text style="font-size: 18px; color: #fff;">工单数: </text><text
            style="color: yellow;font-size: 20px;">0</text></view>
      </view>
      <!-- 两个元统计 -->
      <view style="display: flex;">
        <view style="width: 100%; height: 100%;display: flex; justify-content: center;align-items: center;">
          <ucharts1 />
        </view>
        <view style="width: 100%; height: 100%; display: flex; justify-content: center;align-items: center;">
          <ucharts1 />
        </view>
      </view>
      <!-- 圆下面的文字 -->
      <view style="display: flex; padding-top: 5px;">
        <view style="width: 100%; height: 100%;display: flex; justify-content: center;align-items: center;">
          <text style="color: gray;">已称量工单数：</text> <text style="color: white;">/0</text>
        </view>
        <view style="width: 100%; height: 100%; display: flex; justify-content: center;align-items: center;">
          <text style="color: gray;">已投料工单数：</text> <text style="color: white;">/0</text>
        </view>
      </view>
    </view>

    <!-- 列表 -->
    <view style="
        background-color: rgb(13 24 83); 
        border: 1px solid #0e659f; padding-bottom: 30px; padding-top: 10px;">
      <view style="text-align: center;">
        <label style="width: 100%; display: table; color: #fff;">
          <tr>
            <th style="width: 15%; border-bottom: 1px solid #FFFFFF;">单号</th>
            <th style="border-bottom: 1px solid #FFFFFF;">称量占比</th>
            <th style="border-bottom: 1px solid #FFFFFF;">生产占比</th>
            <th style="border-bottom: 1px solid #FFFFFF;">计划产量</th>
            <th style="border-bottom: 1px solid #FFFFFF;">实际产量</th>
            <th style="border-bottom: 1px solid #FFFFFF;">批号</th>

          </tr>
            <tr :style="{'borderBottom': '1px solid #FFFFFF',color:item.name==='100.00%'?item.address=='100.00%'?'#6EC28F':'yellow':'#fff'}" v-for="item in paginatedList" :key="item.date">
            <td style="border-bottom: 1px solid #FFFFFF;">{{ item.date }}</td>
            <td style="border-bottom: 1px solid #FFFFFF;">{{ item.name }}</td>
            <td style="border-bottom: 1px solid #FFFFFF;">{{ item.address }}</td>
            <td style="border-bottom: 1px solid #FFFFFF;">{{ item.a }}</td>
            <td style="border-bottom: 1px solid #FFFFFF;">{{ item.e }}</td>
            <td style="border-bottom: 1px solid #FFFFFF;">{{ item.d }}</td>
          
          </tr>
        </label>

        <view>
          <!-- 分页控件 -->
          <view style="display: flex; justify-content: center; margin-top: 20px;">
            <button style="background-color: #0e659f; color: white; margin-right: 10px;" @click="prevPage"
              :disabled="currentPage === 1"
              :style="currentPage === 1 ? { backgroundColor: '#cccccc', cursor: 'not-allowed' } : { backgroundColor: '#0e659f' }">&lt;</button>
            <text style="color: white; line-height: 38px;">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</text>
            <button style="background-color: #0e659f; color: white; margin-left: 10px;" @click="nextPage"
              :disabled="currentPage === totalPages"
              :style="currentPage === totalPages ? { backgroundColor: '#cccccc', cursor: 'not-allowed' } : { backgroundColor: '#0e659f' }">&gt;</button>
          </view>
        </view>

      </view>
    </view>

    <!-- 树状图 -->
    <view style="
        background-color: rgba(13 24 83); 
        border: 1px solid #0e659f; padding-bottom: 30px; padding-top: 10px;">
      <view style="text-align: center;">
        <shuzhuangtu />
      </view>
    </view>

    <!-- 第四个-列表 -->
    <view style="
        background-color: rgba(13 24 83); 
        border: 1px solid #0e659f; padding-bottom: 30px; padding-top: 10px;">
      <view style="text-align: center;">
        <view style="text-align: center;">
          <text style="color: #fff; font-size: 20px;">当前乳化锅数据汇总表</text>
          <label style="width: 100%; display: table; color: #fff;">
            <tr>
              <th style="width: 15%; border-bottom: 1px solid #FFFFFF;">乳化锅号</th>
              <th style="border-bottom: 1px solid #FFFFFF;">乳化锅名称</th>
              <th style="border-bottom: 1px solid #FFFFFF;">当前工单号</th>

            </tr>
            <tr style="border-bottom: 1px solid #FFFFFF;" v-for="item in paginatedList2" :key="item.date">
              <td style="border-bottom: 1px solid #FFFFFF;">{{ item.date }}</td>
              <td style="border-bottom: 1px solid #FFFFFF;">{{ item.name }}</td>
              <td style="border-bottom: 1px solid #FFFFFF;">{{ item.address }}</td>
            </tr>
          </label>
            <view>
          <!-- 分页控件 -->
          <view style="display: flex; justify-content: center; margin-top: 20px;">
            <button style="background-color: #0e659f; color: white; margin-right: 10px;" @click="prevPage2"
              :disabled="currentPage2 === 1"
              :style="currentPage2 === 1 ? { backgroundColor: '#cccccc', cursor: 'not-allowed' } : { backgroundColor: '#0e659f' }">&lt;</button>
            <text style="color: white; line-height: 38px;">第 {{ currentPage2 }} 页 / 共 {{ totalPages2 }} 页</text>
            <button style="background-color: #0e659f; color: white; margin-left: 10px;" @click="nextPage2"
              :disabled="currentPage2 === totalPages2"
              :style="currentPage2 === totalPages2 ? { backgroundColor: '#cccccc', cursor: 'not-allowed' } : { backgroundColor: '#0e659f' }">&gt;</button>
          </view>
        </view>
        </view>

      </view>
    </view>


  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed,onUnmounted} from 'vue'
import StatistTopBar from '@/components/StatistTopBar.vue'
import ucharts1 from '@/components/uCharts/ucharts-1.vue'

// 引入树状图
import shuzhuangtu from '@/components/uCharts/shuzhuangtu.vue'


// 组件卸载时执行
onUnmounted(() => {
  // 清除定时器，避免内存泄漏
  stopTimer1()
})
onMounted(() => {
  // 组件挂载时开启定时器
  startTimer1()
})

//#region 第一个列表

// 分页状态管理
// 当前页码
const currentPage = ref(1)
// 每页显示的数量
const pageSize = ref(3)  // 将原来的2改为3

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(list.value.length / pageSize.value)
})

// 计算当前页要显示的数据
const paginatedList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return list.value.slice(start, end)
})
// 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  } else {
       uni.showToast({ title: '已经是第一页了', icon: 'none' })
  }
}

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  } else {
    // 可以添加提示，比如"已经是最后一页了"
    uni.showToast({
      title: '已经是最后一页了',
      icon: 'none'
    })
  }
}

// 控制定时器开启和关闭
const timer = ref<boolean>(false)
// 定时器ID - 用于存储setInterval的返回值，以便后续清除
const timerId = ref<number | null>(null)
/**
 * 自动翻页函数
 * 功能：自动切换到下一页，如果是最后一页则切换到第一页
 * 参数：无
 * 返回值：无
 */
const autoTurnPage = () => {
  currentPage.value = currentPage.value < totalPages.value ? currentPage.value + 1 : 1
}
/**
 * 开启定时器
 * 功能：启动自动翻页定时器
 * 参数：无
 * 返回值：无
 */
const startTimer1 = () => {
  stopTimer1() // 确保先停止已有定时器
  timerId.value = window.setInterval(autoTurnPage, 5000)
  timer.value = true
  console.log('自动翻页已开启')
}
// 停止定时器
//  功能：停止自动翻页定时器
const stopTimer1 = () => {
  if (timerId.value !== null) {
    window.clearInterval(timerId.value)
    timerId.value = null
  }
  timer.value = false
  console.log('自动翻页已停止')
}
//#endregion

// 修改原有的列表渲染，将 v-for 改为 v-for=" item in paginatedList"
const list = ref([
  {
    date: '3171102002',
    name: '100.00%',
    address: '100.00%',
    e: '0.07',
    a: '0',
    d: 'T001-1',
  },
  {
    date: '3171102003',
    name: '100.00%',
    address: '10.00%',
    e: '0.08',
    a: '5',
    d: 'T001-2',
  },
  {
    date: '3171102004',
    name: '10.00%',
    address: '10.00%',
    e: '0.09',
    a: '10',
    d: 'T001-3',
  },
  {
    date: '3171102005',
    name: '100.00%',
    address: '42.00%',
    e: '0.10',
    a: '8',
    d: 'T001-4',
  },
  {
    date: '3171102006',
    name: '78.00%',
    address: '35.00%',
    e: '0.11',
    a: '15',
    d: 'T001-5',
  },
  {
    date: '3171102007',
    name: '85.00%',
    address: '40.00%',
    e: '0.12',
    a: '12',
    d: 'T001-6',
  },
  {
    date: '3171102008',
    name: '90.00%',
    address: '45.00%',
    e: '0.13',
    a: '10',
    d: 'T001-7',
  },
  {
    date: '3171102009',
    name: '85.00%',
    address: '40.00%',
    e: '0.14',
    a: '12',
    d: 'T001-8',
  },


])

//#region 第二个列表

// 分页状态管理
// 当前页码
const currentPage2 = ref(1)
// 每页显示的数量
const pageSize2 = ref(3)  // 将原来的2改为3

// 计算总页数
const totalPages2 = computed(() => {
  return Math.ceil(list2.value.length / pageSize2.value)
})

// 计算当前页要显示的数据
const paginatedList2 = computed(() => {
  const start = (currentPage2.value - 1) * pageSize2.value
  const end = start + pageSize2.value
  return list2.value.slice(start, end)
})
// 上一页
const prevPage2 = () => {
  if (currentPage2.value > 1) {
    currentPage2.value--
  } else {
    // 可以添加提示，比如"已经是第一页了"
    uni.showToast({
      title: '已经是第一页了',
      icon: 'none'
    })
  }
}

// 下一页
const nextPage2 = () => {
  if (currentPage2.value < totalPages2.value) {
    currentPage2.value++
  } else {
    // 可以添加提示，比如"已经是最后一页了"
    uni.showToast({
      title: '已经是最后一页了',
      icon: 'none'
    })
  }
}




//#endregion
const list2 = ref([
  {
    date: 'F001',
    name: '1#',
    address: '2131424324334'
  },
  {
    date: 'F002',
    name: '2#',
    address: '3243546576879'
  },
  {
    date: 'F003',
    name: '3#',
    address: '4354657687980'
  },
  {
    date: 'F004',
    name: '4#',
    address: '5465768798091'
  },
  {
    date: 'F005',
    name: '5#',
    address: '6576879809102'
  },
  {
    date: 'F006',
    name: '6#',
    address: '7687980910213'
  },
  {
    date: 'F007',
    name: '7#',
    address: '87687980910214'
  },
  {
    date: 'F008',
    name: '8#',
    address: '987687980910215'
  }
])

</script>

<style>
.material-stats-page {
  background-image: url('@/static/log/panelBg.jpg');
  background-size: cover;
  background-position: center;
}
</style>